<template>
  <div>
    <el-container>
      <el-aside width="201px">
        <el-menu default-active="/home" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                 :collapse="isCollapse" router>
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2" v-if="isLogin==='false' | role==='manager' | role==='customer'">
            <template slot="title">
              <i class="el-icon-office-building"></i>
              <span slot="title" v-if="role==='manager' && isLogin==='true'">小区管理</span>
              <span slot="title" v-if="role!=='manager' | isLogin==='false'">小区查看</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/communityMap">小区地图</el-menu-item>
              <el-menu-item index="/communityList">小区信息</el-menu-item>
              <el-menu-item index="/communityTag" v-show="isLogin==='true'" v-if="role==='manager'">标签管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" v-if="isLogin==='false' | role==='manager' | role==='customer'">
            <template slot="title">
              <i class="el-icon-postcard"></i>
              <span slot="title" v-if="role==='manager' && isLogin==='true'">广告位管理</span>
              <span slot="title" v-if="role!=='manager' | isLogin==='false'">广告位查看</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/spotList">广告位信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4" v-if="isLogin==='true' && (role==='customer'| role==='salesman')">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span slot="title">我的业务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/bookSpotList" v-if="role==='customer'">我的预定</el-menu-item>
              <el-menu-item index="/reportSpotList" v-if="role==='customer'">我的报障</el-menu-item>
              <el-menu-item index="/dealOrder" v-if="role==='salesman'">订单处理</el-menu-item>
              <el-menu-item index="/dealReport" v-if="role==='salesman'">报障处理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5" v-if="role==='manager'" v-show="isLogin==='true'">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title" v-show="isLogin==='true'">系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/account">用户管理</el-menu-item>
              <el-menu-item index="/role">角色管理</el-menu-item>
              <el-menu-item index="/tradeArea">商圈管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6" v-show="isLogin==='true'" v-if="role!=='worker'">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span slot="title" v-if="role==='manager' && isLogin==='true'" >合同管理</span>
              <span slot="title" v-if="role!=='manager' && isLogin==='true'" >合同查看</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-if="isLogin==='true'" index="/contractList">合同列表</el-menu-item>
              <el-menu-item index="/taskList" v-if="role==='manager'|role==='salesman'">任务列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="7" v-show="isLogin==='true'">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span slot="title">个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="changeInformation">个人信息修改</el-menu-item>
              <el-menu-item index="changePassword">密码修改</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="8" v-show="isLogin==='true'" v-if="role==='worker'">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>
              <span slot="title">任务中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/myTask">我的任务</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 20px">
          <div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item v-show="isLogin==='true'" v-if="role==='customer'">用户{{accountName}}，你好</el-menu-item>
              <el-menu-item v-show="isLogin==='true'" v-if="role==='manager'">管理员{{accountName}}，你好</el-menu-item>
              <el-menu-item v-show="isLogin==='true'" v-if="role==='worker'">工人{{accountName}}，你好</el-menu-item>
              <el-menu-item v-show="isLogin==='true'" v-if="role==='salesman'">业务员{{accountName}}，你好</el-menu-item>
              <el-menu-item style="float: right" v-show="isLogin==='false'">
                <router-link
                  :to="{path:'/register'}">注册
                </router-link>
              </el-menu-item>
              <el-menu-item style="float: right" v-show="isLogin==='false'">
                <router-link :to="{path:'/login'}">登录</router-link>
              </el-menu-item>

              <el-menu-item v-show="isLogin==='true'" style="float: right">
                <a @click="logOut">退出</a>
              </el-menu-item>
            </el-menu>
          </div>
        </el-header>
        <el-main mode="out-in">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {

  data () {
    return {
      activeIndex: '0',
      isCollapse: false,
      isLogin: this.$store.state.isLogin,
      role: this.$store.state.role,
      accountId: this.$store.state.accountId,
      accountName: this.$store.state.accountName
    }
  },
  methods: {
    handleSelect () {},
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    logOut () {
      this.isLogin = 'false'
      this.$store.commit('setState', {isLogin: 'false'})
      this.$router.push('/home')
    }
  }
}
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
